var nodeChart1; //国调地图
var nodeChart2; //分中心地图
var nodeChart3; //省调地图
var mapBox;
//地图数据
var areaList = [{
		name: "东北",
		value: ["蒙东", "辽宁", "吉林", "黑龙江"]
	},
	{
		name: "西北",
		value: ["新疆", "陕西", "甘肃", "青海", "宁夏"]
	},
	{
		name: "西南",
		value: ["重庆", "四川", "西藏"]
	},
	{
		name: "华北",
		value: ["北京", "天津", "河北", "山西", "山东", "冀北"]
	},
	{
		name: "华中",
		value: ["江西", "河南", "湖北", "湖南"]
	},
	{
		name: "华东",
		value: ["上海", "江苏", "浙江", "安徽", "福建"]
	},
]
//大区数据
var areaDataList = [{
		name: "东北",
		value: 1
	},
	{
		name: '西北',
		value: 1
	},
	{
		name: '西南',
		value: 1
	},
	{
		name: '华北',
		value: 1
	},
	{
		name: '华中',
		value: 1
	},
	{
		name: '华东',
		value: 1
	},
	{
		name: '华南',
		value: 0
	},
	{
		name: '台湾',
		value: 0
	},
	{
		name: '澳门',
		value: 0
	},
	{
		name: '香港',
		value: 0
	}
];
//国调
var dataList = [{
		name: "南海诸岛",
		value: 0
	},
	{
		name: '北京',
		value: 1
	},
	{
		name: '天津',
		value: 1
	},
	{
		name: '上海',
		value: 1
	},
	{
		name: '重庆',
		value: 1
	},
	{
		name: '河北',
		value: 1
	},
	{
		name: '河南',
		value: 1
	},
	{
		name: '云南',
		value: 0
	},
	{
		name: '辽宁',
		value: 1
	},
	{
		name: '黑龙江',
		value: 1
	},
	{
		name: '湖南',
		value: 1
	},
	{
		name: '安徽',
		value: 1
	},
	{
		name: '山东',
		value: 1
	},
	{
		name: '新疆',
		value: 1
	},
	{
		name: '江苏',
		value: 1
	},
	{
		name: '浙江',
		value: 1
	},
	{
		name: '江西',
		value: 1
	},
	{
		name: '湖北',
		value: 1
	},
	{
		name: '广西',
		value: 0
	},
	{
		name: '甘肃',
		value: 1
	},
	{
		name: '山西',
		value: 1
	},
	{
		name: '内蒙古',
		value: 1
	},
	{
		name: '陕西',
		value: 1
	},
	{
		name: '吉林',
		value: 1
	},
	{
		name: '福建',
		value: 0
	},
	{
		name: '贵州',
		value: 1
	},
	{
		name: '广东',
		value: 0
	},
	{
		name: '青海',
		value: 1
	},
	{
		name: '西藏',
		value: 1
	},
	{
		name: '四川',
		value: 1
	},
	{
		name: '宁夏',
		value: 1
	},
	{
		name: '海南',
		value: 0
	},
	{
		name: '台湾',
		value: 0
	},
	{
		name: '香港',
		value: 0
	},
	{
		name: '澳门',
		value: 0
	}
];
//省调
var dataListGw = [{
		name: "南海诸岛",
		value: 0,
		stValue:0
	},
	{
		name: '北京',
		value: 1,
		stValue:0
	},
	{
		name: '天津',
		value: 1,
		stValue:0
	},
	{
		name: '上海',
		value: 1,
		stValue:0
	},
	{
		name: '重庆',
		value: 1,
		stValue:0
	},
	{
		name: '河北',
		value: 1,
		stValue:0
	},
	{
		name: '冀北',
		value: 1,
		stValue:0
	},
	{
		name: '河南',
		value: 1,
		stValue:0
	},
	{
		name: '云南',
		value: 0,
		stValue:0
	},
	{
		name: '辽宁',
		value: 1,
		stValue:0
	},
	{
		name: '黑龙江',
		value: 1,
		stValue:0
	},
	{
		name: '湖南',
		value: 1,
		stValue:0
	},
	{
		name: '安徽',
		value: 1,
		stValue:0
	},
	{
		name: '山东',
		value: 1,
		stValue:0
	},
	{
		name: '新疆',
		value: 1,
		stValue:0
	},
	{
		name: '江苏',
		value: 1,
		stValue:0
	},
	{
		name: '浙江',
		value: 1,
		stValue:0
	},
	{
		name: '江西',
		value: 1,
		stValue:0
	},
	{
		name: '湖北',
		value: 1,
		stValue:0
	},
	{
		name: '广西',
		value: 0,
		stValue:0
	},
	{
		name: '甘肃',
		value: 1,
		stValue:0
	},
	{
		name: '山西',
		value: 1,
		stValue:0
	},
	{
		name: '蒙东',
		value: 1,
		stValue:0
	},
	{
		name: '蒙西',
		value: 1,
		stValue:0
	},
	{
		name: '陕西',
		value: 1,
		stValue:0
	},
	{
		name: '吉林',
		value: 1,
		stValue:0
	},
	{
		name: '福建',
		value: 0,
		stValue:0
	},
	{
		name: '贵州',
		value: 1,
		stValue:0
	},
	{
		name: '广东',
		value: 0,
		stValue:0
	},
	{
		name: '青海',
		value: 1,
		stValue:0
	},
	{
		name: '西藏',
		value: 1,
		stValue:0
	},
	{
		name: '四川',
		value: 1,
		stValue:1
	},
	{
		name: '宁夏',
		value: 1,
		stValue:0
	},
	{
		name: '海南',
		value: 0,
		stValue:0
	},
	{
		name: '台湾',
		value: 0,
		stValue:0
	},
	{
		name: '香港',
		value: 0,
		stValue:0
	},
	{
		name: '澳门',
		value: 0,
		stValue:0
	}
];
var option = {
	backgroundColor: '',
	title: {
		show: true,
		left: 'center',
		textStyle: {
			color: '#00B4A0',
			fontSize: 36,
		}
	},
	tooltip: {
		trigger: 'item',
	},
	geo: {
		map: 'zh',
		roam: false, //是否开启平游或缩放
		zoom: 1,
		top: "10px",
		itemStyle: {
			normal: {
				borderColor: 'rgb(0,236,239)',
				borderWidth: 1.5,
				shadowColor: 'rgb(0,236,239)',
				//shadowOffsetX: 0,
				//shadowOffsetY: 4,
				shadowBlur: 10,
			},
		},
		label: {
			normal: {
				show: false,
			},
			emphasis: {
				show: false
			}
		},
	},
	series: [{
		type: 'map',
		map: 'zh',
		geoIndex: 1, //1的时候series地图控制，0的时候geo控制
		top: "10px",
		data: dataList,
		label: {
			normal: {
				show: false,
				color: "#333333",
			},
			emphasis: {
				show: false,
				color: "#333333",
			}
		},
	}, {
		type: 'effectScatter',
		coordinateSystem: 'geo',
		symbolSize: 10,
		showEffectOn: 'render',
		rippleEffect: {
			brushType: 'stroke'
		},
		hoverAnimation: true,
		label: {
			normal: {
				show: false,
			},
			emphasis: {
				show: false,
			}
		},
		itemStyle: {
			normal: {
				color: '#FB062E',
				shadowBlur: 10,
				shadowColor: '#FB062E'
			}
		},
		zlevel: 1
	}, ]
}
//字段要和kgo-scroll-head 下的div的name属性一一对应
layui.use('form', function() {
	var x;
	try {
		x = parent.FrameWHToChildren();
	} catch (err) {
		x = document.documentElement.clientHeight;
	}
	$("#body").css("height", x - 5);
	init();
});

function init() {
	setMap(1); //画国调地图
	productTop10();
	systemTop10();
	companyTop();
}
//处理地图颜色
function checkColor(data) {
	var dataList = data.map(function(item) {
		if (item.value == 0) {
			item.itemStyle = {
				normal: {
					areaColor: '#E4E6E7',
					borderColor: '#fff',
					borderWidth: 1
				},
				emphasis: {
					areaColor: '#E4E6E7',
					borderColor: '#fff',
					borderWidth: 1
				}
			}
			item.label = {
				show: false
			}
			item.tooltip = {
				formatter: function(params) {
					return "";
				}
			}
		} else {
			item.itemStyle = {
				normal: {
					areaColor: '#98E7DE',
					borderColor: '#fff',
					borderWidth: 1
				},
				emphasis: {
					areaColor: '#1accb8',
					borderColor: '#fff',
					borderWidth: 1
				}
			}
			item.tooltip = {
				formatter: function(params) {
					var str = "<div>涉及产品 2/4</div>";
					str += "<div>涉及主/厂站系统 3/6</div>";
					str += "<div>涉及主/厂站主机 3/6</div>";
					str += "<div>发布漏洞 4/10</div>";
					return str;
				}
			}
		}
		return item;
	});
	return dataList;
}
//获取地图中心点坐标
function getMapCenter() {
	var geoCoordMap = [];
	//获取中心点坐标
	var mapFeatures = echarts.getMap("zh").geoJson.features;
	mapFeatures.forEach(function(v) {
		var obj = {
			name: v.properties.name,
			value: v.properties.cp
		}
		geoCoordMap.push(obj)
	});
	return geoCoordMap;
}
//处理散点图
function getScatter(data) {
	var geoCoordMap = getMapCenter();
	var dataList = [];
	data.forEach(function(item) {
		if (item.stValue == 1) {
			geoCoordMap.forEach(function(v) {
				if (v.name == item.name) {
					dataList.push(v)
				}
			});
		}
	});
	return dataList;
}
//自适应rem单位
function echartsFontSize(num) {
	var cssfontSize = $('html').css('font-size'); //得到html字体大小
	var fontSize = parseFloat(cssfontSize); //得到字符串内数值部分
	console.log(num * fontSize / 100);
	return num * fontSize / 100;
}
//画地图
function setMap(type) {
	if (mapBox && !mapBox._disposed) {
		mapBox.dispose();
		mapBox.off('click');
	}
	if (type == 1) {
		$("#nodeChart1").show();
		$("#nodeChart2").hide();
		$("#nodeChart3").hide();
		mapBox = echarts.init(document.getElementById('nodeChart1'));
		$.get('./js/china.json', function(json) {
			echarts.registerMap('zh', json);
			var gtOption = jQuery.extend(true, {}, option);
			//国调配置
			gtOption.title.text = "国调中心";
			gtOption.geo.label.normal.show = false;
			gtOption.geo.label.emphasis.show = false;
			gtOption.series[0].data = checkColor(dataList);
			mapBox.setOption(gtOption);
			mapBox.on('click', function (params) {
				console.log(params);
			});
		});
	} else if (type == 2) {
		$("#nodeChart2").show();
		$("#nodeChart1").hide();
		$("#nodeChart3").hide();
		mapBox = echarts.init(document.getElementById('nodeChart2'));
		$.get('./js/area.json', function(json) {
			echarts.registerMap('zh', json);
			var centerOption = jQuery.extend(true, {}, option);
			centerOption.title.text = "分中心";
			centerOption.geo.left = "40%";
			centerOption.series[0].left = "40%";
			centerOption.series[0].data = checkColor(areaDataList);
			centerOption.series[0].label.normal.show = true;
			centerOption.series[0].label.emphasis.show = true;
			mapBox.setOption(centerOption);
		});
	} else {
		$("#nodeChart3").show();
		$("#nodeChart1").hide();
		$("#nodeChart2").hide();
		mapBox = echarts.init(document.getElementById('nodeChart3'));
		$.get('./js/china_gw.json', function(json) {
			echarts.registerMap('zh', json);
			var provinceOption = jQuery.extend(true, {}, option);
			provinceOption.title.text = "省调中心";
			provinceOption.series[0].data = checkColor(dataListGw);
			provinceOption.series[0].label.normal.show = true;
			provinceOption.series[0].label.emphasis.show = true;
			provinceOption.series[1].data = getScatter(dataListGw); //散点图
			mapBox.setOption(provinceOption);
		});
	}
}
//产品排行top10
function productTop10() {
	var data = [{
			name: "凝思安全操作系统V6.0",
			value: 90
		},
		{
			name: "凝思安全操作系统V6.0",
			value: 90
		},
		{
			name: "凝思安全操作系统V6.0",
			value: 90
		},
		{
			name: "凝思安全操作系统V6.0",
			value: 90
		},
		{
			name: "凝思安全操作系统V6.0",
			value: 90
		},
		{
			name: "凝思安全操作系统V6.0",
			value: 90
		},
		{
			name: "凝思安全操作系统V6.0",
			value: 90
		},
		{
			name: "凝思安全操作系统V6.0",
			value: 90
		},
		{
			name: "凝思安全操作系统V6.0",
			value: 90
		},
	]
	var colorArr = [{
			top: '#FF9A22', //黄色
			bottom: '#FFD56E'
		},
		{
			top: '#33B9F4', //蓝色
			bottom: '#33B9F4'
		}
	];
	var option = {
		tooltip: {},
		backgroundColor: '#fff',
		grid: {
			top: '20px',
			right: '20px',
			left: '50px',
			bottom: '30px'
		},
		xAxis: [{
			type: 'category',
			color: '#92939A',
			data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
			axisLabel: {
				color: '#92939A',
				textStyle: {
					fontSize: 14
				},
				margin: 0
			},
			axisLine: {
				lineStyle: {
					color: 'rgba(107,107,107,0.37)',
				}
			},
			axisTick: {
				show: false
			},
		}],
		yAxis: [{
			axisLabel: {
				//formatter: '{value}%',
				color: '#999',
				textStyle: {
					fontSize: 12
				},
			},
			axisLine: {
				lineStyle: {
					color: 'rgba(107,107,107,0.37)',
				}
			},
			axisTick: {
				show: false
			},
			splitLine: {
				lineStyle: {
					color: 'rgba(131,101,101,0.2)',
					type: 'dashed',
				}
			}
		}],
		series: [{
			type: 'bar',
			data: data,
			barWidth: '12px',
			itemStyle: {
				normal: {
					color: function(params) {
						let num = colorArr.length;
						return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							offset: 0,
							color: colorArr[params.dataIndex % num].top // 0% 处的颜色
						}, { //可根据具体情况决定哪根柱子显示哪种颜色
							offset: 1,
							color: colorArr[params.dataIndex % num].bottom // 100% 处的颜色
						}], false)
					},
					barBorderRadius: [30, 30, 0, 0],
				}
			},
			label: {
				normal: {
					show: false,
				}
			}
		}]
	};
	var productTop = echarts.init(document.getElementById('productTop'));
	productTop.setOption(option);
}
//系统排行top10
function systemTop10() {
	var data = [{
			name: "110kV知音变电站监控系统",
			value: 90
		},
		{
			name: "110kV知音变电站监控系统",
			value: 90
		},
		{
			name: "110kV知音变电站监控系统",
			value: 90
		},
		{
			name: "110kV知音变电站监控系统",
			value: 90
		},
		{
			name: "110kV知音变电站监控系统",
			value: 90
		},
		{
			name: "110kV知音变电站监控系统",
			value: 90
		},
		{
			name: "110kV知音变电站监控系统",
			value: 90
		},
		{
			name: "110kV知音变电站监控系统",
			value: 90
		},
		{
			name: "110kV知音变电站监控系统",
			value: 90
		},
	]
	var colorArr = [{
			top: '#FF9A22', //黄色
			bottom: '#FFD56E'
		},
		{
			top: '#33B9F4', //蓝色
			bottom: '#33B9F4'
		}
	];
	var option = {
		tooltip: {},
		backgroundColor: '#fff',
		grid: {
			top: '20px',
			right: '20px',
			left: '50px',
			bottom: '30px'
		},
		xAxis: [{
			type: 'category',
			color: '#92939A',
			data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
			axisLabel: {
				color: '#92939A',
				textStyle: {
					fontSize: 14
				},
				margin: 0
			},
			axisLine: {
				lineStyle: {
					color: 'rgba(107,107,107,0.37)',
				}
			},
			axisTick: {
				show: false
			},
		}],
		yAxis: [{
			axisLabel: {
				//formatter: '{value}%',
				color: '#999',
				textStyle: {
					fontSize: 12
				},
			},
			axisLine: {
				lineStyle: {
					color: 'rgba(107,107,107,0.37)',
				}
			},
			axisTick: {
				show: false
			},
			splitLine: {
				lineStyle: {
					color: 'rgba(131,101,101,0.2)',
					type: 'dashed',
				}
			}
		}],
		series: [{
			type: 'bar',
			data: data,
			barWidth: '12px',
			itemStyle: {
				normal: {
					color: function(params) {
						let num = colorArr.length;
						return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							offset: 0,
							color: colorArr[params.dataIndex % num].top // 0% 处的颜色
						}, { //可根据具体情况决定哪根柱子显示哪种颜色
							offset: 1,
							color: colorArr[params.dataIndex % num].bottom // 100% 处的颜色
						}], false)
					},
					barBorderRadius: [30, 30, 0, 0],
				}
			},
			label: {
				normal: {
					show: false,
				}
			}
		}]
	};
	var systemTop = echarts.init(document.getElementById('systemTop'));
	systemTop.setOption(option);
}

//公司列表
function companyTop() {
	var data = [3.66, 2.86, 1.82, 1.8, 1.53, 1.47, 1.3, 1.25, 1.1, 1.02, 3.66, 2.86, 1.82, 1.8, 1.53, 1.47, 1.3, 1.25, 1.1,
		1.02
	];
	var colorList = ['#98E7DE', '#7ABBEA'];
	var option = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		legend: {
			show: false
		},
		grid: {
			left: 60,
			top: 20,
		},
		dataZoom: [{
			yAxisIndex: 0,
			show: false,
			type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
			startValue: 0, // 从头开始。
			endValue: 10 // 一次性展示10个。
		}],
		xAxis: {
			type: 'value',

			splitLine: {
				show: false
			},
			axisLabel: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLine: {
				show: false
			}

		},
		yAxis: {
			type: 'category',
			inverse: true,
			axisLine: {
				show: true,
				lineStyle: {
					color: "#DCDCDC"
				}
			},
			axisTick: {
				show: true
			},
			axisPointer: {
				label: {
					show: true,
				}
			},
			data: ['北京', '天津', '河北', '冀北', '山西', '山东', '新疆', '上海', '云南', '广东', '北京', '天津', '河北', '冀北', '山西', '山东', '新疆', '上海',
				'云南', '广东'
			],
			axisLabel: {
				margin: 55,
				fontSize: 11,
				align: 'left',
				color: '#92939A',
			}
		},
		series: [{
				z: 2,
				name: 'value',
				type: 'bar',
				barWidth: 20,
				data: data.map((item, i) => {
					itemStyle = {
						color: i % 2 == 0 ? colorList[1] : colorList[0]
					}
					return {
						value: item,
						itemStyle: itemStyle
					};
				}),
			}

		]
	};
	var companyTop = echarts.init(document.getElementById('companyTop'));
	companyTop.setOption(option);
	// 定时器
	setInterval(function() {
		// 每次向后滚动一个，最后一个从头开始。
		if (option.dataZoom[0].endValue == data.length - 1) {
			option.dataZoom[0].endValue = 10;
			option.dataZoom[0].startValue = 0;
		} else {
			option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
			option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
		}
		companyTop.setOption(option);
	}, 2000);
}


$(function() {
	windowSizeAuto();
});
//rem自适应，页面适配
function windowSizeAuto() {
	var whdef = 100 / 1720; // 表示1920的设计图,使用100PX的默认值
	var wH = window.innerHeight; // 当前窗口的高度
	var wW = window.innerWidth; // 当前窗口的宽度
	console.log(wW);
	var rem = wW * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
	$('html').css('font-size', rem + "px");
}

$(document).on('click', '#switch-place button', function() {
	$(this).addClass('selected').siblings().removeClass('selected');
	setMap($(this).index() + 1);
})


$(window).resize(function() {
	windowSizeAuto();
});
